<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      .box {
        width: 100%;
        height: 300px;
        position: relative;
      }

      .demo {
        width: 100px;
        height: 100px;
        position: absolute;
        left: 100px;
        top: 100px;
        background-color: #ff0000;
        border: 1px solid black;
        /*构造一个圆*/
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;

        /*实施动画*/
        -webkit-animation: move 5s 500ms 4 alternate;
        -o-animation: move 5s 500ms 4 alternate;
        animation: move 5s 500ms 4 alternate;
        /*animation: 动画名 持续时间 延迟开始时间 循环播放次数 是否反向播放*/
      }

      /*定义关键帧*/
      /*@-webkit-keyframes move {*/
      /*0% {*/
      /*left: 100px;*/
      /*}*/
      /*100% {*/
      /*left: 500px;*/
      /*}*/
      /*}*/

      /*@-moz-keyframes move {*/
      /*0% {*/
      /*left: 100px;*/
      /*}*/
      /*100% {*/
      /*left: 500px;*/
      /*}*/
      /*}*/

      /*@-ms-keyframes move {*/
      /*0% {*/
      /*left: 100px;*/
      /*}*/
      /*100% {*/
      /*left: 500px;*/
      /*}*/
      /*}*/

      /*@-o-keyframes move {*/
      /*0% {*/
      /*left: 100px;*/
      /*}*/
      /*100% {*/
      /*left: 500px;*/
      /*}*/
      /*}*/

      /*定义多个关键帧，让动画效果更平滑*/
      @keyframes move {
        0% {
          left: 100px;
          top: 100px;
          background-color: #00ff00;
        }
        25% {
          left: 150px;
          top: 150px;
        }
        50% {
          left: 200px;
          top: 200px;
          background-color: blue;
        }
        75% {
          left: 350px;
          top: 150px;
        }
        100% {
          left: 400px;
          top: 100px;
          background-color: purple;
        }
      }

      .running:hover + .box .demo {
        /*兄弟用+*/
        /*播放*/
        -webkit-animation-play-state: running;
        -moz-animation-play-state: running;
        -o-animation-play-state: running;
        animation-play-state: running;
      }

      .stop:hover + .box .demo {
        /*暂停*/
        -webkit-animation-play-state: paused;
        -moz-animation-play-state: paused;
        -o-animation-play-state: paused;
        animation-play-state: paused;
      }
    </style>
  </head>
  <body>
    <button class="running">running</button>
    <button class="stop">stop</button>
    <div class="box">
      <div class="demo"></div>
    </div>
  </body>
</html>
